<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-alert type="warning" title="波场官网：https://trongrid.io"
				:closable="false" show-icon />
		</el-card>
		<el-card shadow="never" class="!border-none">
			<el-form ref="formRef" class="ls-form" label-position="top">
				<el-form-item label="API Key" prop="api_key">
					<div class="w-80">
						<el-input v-model.trim="tronData.api_key" placeholder="请输入API Key"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="接口地址" prop="gateway_address">
					<div class="w-80">
						<el-input v-model.trim="tronData.url" placeholder="请输入接口地址"></el-input>
					</div>
				</el-form-item>
			</el-form>
		</el-card>

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import { isEmpty } from 'lodash-es';
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'

	const name = ref('tron')

	// 表单数据
	const tronData = reactive({
		api_key: "",
		url: "",
	})
	const handleSubmit = async () => {
		await setWebsiteProject({ name: name.value, content: tronData })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: name.value })
		if (!isEmpty(data.data)) {
			for (const key in tronData) {
				if (data.data[key] != null && data.data[key] != undefined) {
					//@ts-ignore
					tronData[key] = data.data[key]
				}
			}
		}
	}

	getData()
</script>

<style lang="scss" scoped></style>